<template>
	<div class="color_picker">
		<el-input v-model="colorValue" placeholder="选择颜色" readonly></el-input>
		<el-color-picker v-model="colorValue" :predefine="predefineColors"></el-color-picker>
	</div>
</template>

<script>
import emitter from 'element-ui/src/mixins/emitter';
export default {
	mixins: [emitter],
	props: {
		value: String
	},
	data() {
		return {
			colorValue: this.value,
			predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', '#c7158577']
		}
	},
	watch: {
		value(val) {
			this.colorValue = val;
		},
		colorValue(val) {
			this.$emit('input', val);
			this.dispatch('ElFormItem', 'el.form.change', [val]);
		}
	}
}
</script>

<style lang="scss" scoped>
.color_picker::v-deep {
	position: relative;

	.el-color-picker {
		position: absolute;
		top: 0;
		right: 0;
	}

	.el-color-picker__trigger {
		border: none;
	}
}
</style>